{% extends 'base.html' %}
{% load static %}
{% block title %}商品展示页{% endblock %}
{% block js %}
  <script src="{% static 'js/commodity/search.js' %}"></script>{% endblock %}
{% block header %}{% include 'include/_header.html' %}{% endblock %}

{% block content %}
  <main id="main">
    <div class="layui-container"> <!--实现页面内容居中，两边留白-->
      <!--好物推荐 start-->
      <div class="good-goods">
        <!--good-list start--><!--示例栅格+卡片面板-->
        <div class="layui-row good-list">
          {% for commodity in commodities %}
            <div class="layui-col-xs3">
              <a class="layui-card" href="/commodity/get_detail/?id={{ commodity.id }}">
                <div class="layui-card-header">
                  <div class="img">
                    <img src="{{ commodity.cover_picture }}"
                         alt="">
                  </div>
                </div>
                <div class="layui-card-body">
                  <h4>{{ commodity.title }}</h4>
                  <p>{{ commodity.subtitle }}</p>
                </div>
              </a>
            </div>
          {% endfor %}
        <!--<div class="layui-col-xs3">同上复制7个</div>-->
      </div>
      <!--good-list end-->
    </div>
    <!--好物推荐 end-->

    </div>
  </main>

{% endblock %}

{% block footer %}{% include 'include/_footer.html' %}{% endblock %}